<template>
    <div class="pendChartOne" v-if="schoolAuthority.CountEventByStatus">
        <Row type="flex" justify="center">
            <span class="title">处理状态统计图</span>
        </Row>
        <Row>
            <!-- 饼图 -->
            <pie Im="pie-one" :chartData="pieOneData"/>
        </Row>
        <Row class="btn-area" type="flex" align="space-between" v-if="schoolAuthority.CountEventByStatus">
            <Col span=10 class="area" v-for="(item, index) in schoolAuthority.CountEventByStatus" :key="item.EVENT_STATUS"
            @click.native="toLink('SAbyStatusList', item.EVENT_STATUS, item.EVENT_STATUS_NAME)">
                <Row>
                    <Col span=10>{{item.EVENT_STATUS_NAME}}</Col>
                    <Col span=8 class="number">{{item.EVENT_SUM}}</Col>
                    <Col span=6 style="margin-top: -2px;">
                        <Icon class="jt" :style="{backgroundColor: schoolAuthority.chartColor[index % 8]}" type="chevron-right"></Icon>
                    </Col>
                </Row>
            </Col>
        </Row>
    </div>
    <div class="nodata" v-else>
        <img src="static/staff/nodate.png">
        <br>
        <br>
        <div class="text">状态统计暂无数据</div>
    </div>
</template>

<script>
export default {
    components: {
        pie: () => import('./chart/pie.vue')
    },
    data() {
        return {
            schoolAuthority: this.$store.state.schoolAuthority,
        }
    },
    computed: {
        pieOneData() {
            try {
                let sum = 0
                let tempArray = []
                this.$store.state.schoolAuthority.CountEventByStatus.forEach((item) => {
                    sum += item.EVENT_SUM
                })
                tempArray = this.$store.state.schoolAuthority.CountEventByStatus.map((item) => {
                    let obj = {
                        a: '1',
                        b: item.EVENT_SUM / sum,
                        c: item.EVENT_STATUS
                    }
                    return obj
                })
                return tempArray
            } catch (Error) {
                return
            }
        }
    },
    methods: {
        toLink(link, status, name) {
            sessionStorage.setItem('eventStatus', status)
            sessionStorage.setItem('saynameSta', name)
            this.$router.push({
                name: link,
                params: {
                    status,
                    name
                }
            })
        }
    }
}
</script>

<style lang="less">
    .pendChartOne{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 70vh;
        background-color: #fff;
        .title{
            color: rgb(45, 140, 240);
            font-size: 16px;
        }
        .btn-area{
            padding: 0 30px;
            .area{
                // width: 140px;
                height: 30px;
                margin-bottom: 20px;
                border: 0.99px solid rgb(0, 147, 221);
                font-size: 12px;
                border-radius: 4px;
                text-align: center;
                line-height: 30px;
                .number{
                    color: rgb(45, 140, 240);
                }
                .jt{
                    color: #fff;
                    border-radius: 100%;
                    font-size: 12px;
                    padding: 3px 5px 3px 6px;
                }
            }
        }
    }
</style>
